Brandon

About

Brandon

HTML5 Personal Portfolio Template

Brandon is HTML5 Personal Portfolio and Resume Template built with Foundation 6 framework.

Structure

Files Structure

Once downloaded, unzip the compressed folder to see the structure:

html template/
    ├── css/
    │   ├── foundation.css
    │   ├── foundation.min.css
    │   ├── magnific-popup.css
    │   ├── main.css
    │   ├── materialdesignicons.css
    │   ├── materialdesignicons.min.css
    │   └── slick.css
    ├── fonts/
    │   ├── materialdesignicons-webfont.eot
    │   ├── materialdesignicons-webfont.svg
    │   ├── materialdesignicons-webfont.ttf
    │   ├── materialdesignicons-webfont.woff
    │   └── materialdesignicons-webfont.woff2
    ├── img/
    │   ├── avatars/
    │       └── *images
    │   ├── blog/
    │       └── *images
    │   ├── brands/
    │       └── *images
    │   ├── portfolio/
    │       └── *images
    │   └── *images
    ├── js/
    │   └── vendor/
    │       └── *for detailed list see js section
    │   ├── contact.js
    │   └── main.js
    ├── php/
    │   ├── phpmailer/
    │   ├── twitter/
    │   	├── lib/
    │   	└── index.php
    │   └── contact-form.php
    ├── 404.html
    ├── blog-list.html
    ├── index.html
    ├── post.html
    ├── project.html
    └── shortcodes.html

Html Structure

This theme is a responsive layout based on Foundation 6 Framework. All information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure:

layout

Simple HTML Boilerplate (index.html):

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Merope</title> <!-- Favicon --> ... <!-- FONTS --> ... <!-- CSS --> ... <script src="js/vendor/modernizr.js"></script> </head> <body> <!-- Header wrap --> <div class="header-wrap flex flex-middle"> <!-- Header --> <header class="header"> <!-- Navbar --> <nav class="navbar"> ... </nav> </header> </div> <!-- Main wrap --> <div class="main-wrap"> <!-- Main --> <main class="main"> <!-- Section Home --> <section id="home" class="section home"> ... </section> <!-- Section Counters --> <section class="section counters"> ... </section> ... </main> <!-- Footer --> <footer class="footer"> ... </footer> </div><!-- /.main wrap --> <!-- Scripts –––––––––––––––––––––––––––––––––––––––––––––––––– --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"></script>')</script> <script src="js/vendor/foundation.min.js"></script> <script src="js/vendor/ripple.min.js"></script> <script src="js/vendor/jquery.appear.js"></script> ... ... <script src="js/main.js"></script> <script src="js/contact.js"></script> </body> </html>

CSS Structure

All css files are located in css folder:

main.css

This file includes css styles for pages. If you want to change style, colors, margin, padding, font settings etc. of the template you should start from this file.

/* Table of Contents
=================================================== */
/*
 * Default
    * Titles
    * Flexbox
 * Preloader
 * Components
    * Cards
    * Buttons
    * Labels
    * Icon Box
    * Breadcrumbs
    * Pagination
    * Magnific Popup
    * Accordion
    * Tables
    * Callout
    * Progress bars
    * Slider
    * Slick Slider
    * Definition list
    * Ripple
 * Layout
    * Header wrap, Main wrap
    * Table wrap
 * Header
 * Navbar
 * Main
    * Section
 * Social List
 * Home
 * Counters
 * About
 * Skills
 * Services
 * Resume
 * Testimonials
 * Portfolio
    * Masonry
    * Filter
 * Brands
 * Blog
    * Meta
    * Post
    * Tags
    * Comments
    * Widgets
 * Call To Action
 * Pricing
 * Latest Tweets
 * Contact
 * Footer
 * Project
 * Input
*/

Example:

    	
    /* Header
    =================================================== */
   .header {
      background: none no-repeat scroll center center #fff;
	  color: inherit;
	  width: 100%;
	  height: auto;
	  padding: 0;
	  position: relative;
	  z-index: 1;
   }

foundation.css, foundation.min.css

Foundation 6 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version foundation.min.css for use. For development you can use foundation.css.

Javascript

All Javascript files are located in js folder.

Installation

Getting the Template Online

Warning! This is not a Wordpress template. Running, uploading or inserting in Wordpress CMS will have no effect.

This is HTML5 template, you do not need create a database. Just simply upload to the server.

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.

  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.

  3. Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

php Contact Form and Twitter Feed working only in server environment with installed php.
Load your content on server or use webserver on your machine.

Customization

Layout Settings

Insert your content, write your text, load your photos and images. Compress the size of images and photos. Demo template uses high resolution images, but for normal use it is not appropriate. High-res photos = slow website loading.

You can change HTML structure. Move sections in main content as needed.

Fonts

Roboto

We use free Google font: Roboto

Material Design Icons

Default Icon font for our template is Material Design Icons

Basic structure: <i class="mdi mdi-facebook"></i>

Replace icon name (icon name = css class), example mdi-facebook, with the actual icon name you wish to display, example mdi-home. Then your new icon is <i class="mdi mdi-home"></i>


Important: Google Font Roboto is used as hosted library.

The recommended way to use all Google Font´s is by linking to the web font hosted on Google Fonts.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

Smooth Scroll

By default: smooth scrolling is enabled for navbar links and links with attribute data-scroll="smooth".

// -----------------------------
// Smooth Scroll
// -----------------------------
$('.top-bar li a, a[data-scroll=smooth]').bind('click', function (event) {
	var $anchor = $(this);
	$('html, body').stop().animate({
		scrollTop: $($anchor.attr('href')).offset().top
	}, 1500, 'swing');
	event.preventDefault();
});

To apply smooth scrolling for any link, just insert data-scroll="smooth" at the end of a tag.

<a href="#portfolio" class="button rounded" data-scroll="smooth">View Portfolio</a>

Important: Each element (section, article, etc...) needs a unique ID.

<section id="portfolio" class="section portfolio"> ... </section>

Statistics - Counters

Setting the counters make directly in HTML code. Open index.html and follow the example below:

Change number value data-to="number"

<!-- Section Counters --> <section class="section counters"> <div class="row"> <div class="medium-3 columns"> <div class="numbers"> <span class="number" data-from="0" data-to="387" data-speed="3000" data-refresh-interval="50"></span> <span class="number-info">Creative Ideas</span> </div> </div> <div class="medium-3 columns"> <div class="numbers"> <span class="number" data-from="0" data-to="218" data-speed="3000" data-refresh-interval="50"></span> <span class="number-info">Projects Live</span> </div> </div> <div class="medium-3 columns"> <div class="numbers"> <span class="number" data-from="0" data-to="35" data-speed="3000" data-refresh-interval="50"></span> <span class="number-info">Awards winners</span> </div> </div> <div class="medium-3 columns"> <div class="numbers"> <span class="number" data-from="0" data-to="156" data-speed="3000" data-refresh-interval="50"></span> <span class="number-info">Happy Customers</span> </div> </div> </div> </section>

For further documentation and setting information, see jQuery countTo.

Progress Bars

Set value in HTML code. Open index.html and follow the example below:

Change number value aria-valuenow="number"

<div class="progress" role="progressbar" tabindex="0" aria-valuenow="85" aria-valuemin="0" aria-valuetext="85 percent" aria-valuemax="100"> <div class="progress-meter"></div> <span class="progress-count"></span> </div>

Contact Form

This template contains fully working contact form. Forms used:

  1. jQuery Validation Plugin form validation library

  2. script contact.js (must be included before end body tag - see chapter Javascript)

  3. php file: contact-form.php

All you need is replace your actual email address.

In order to receive messages you need to edit line 8 of php/contact-form.php file. Just write your own email address:

<?php ... // Enter your email address - edit line 8 $to = "your@mail.com"; < === HERE REPLACE YOUR EMAIL ADDRESS ... ?>

Latest Tweets

Plugin is based on jquery.tweet.js-mod plugin by Stan Scates. It is simple to use and configure.

  1. First step: You need to have a twitter App for your usage in order to obtain OAuth credentials. See https://dev.twitter.com/apps for help.

  2. Second step: After obtaining OAuth credentials, put them to php/twiter/index.php. Edit following code:

    <?php /* Configure your twitter API access params below */ // Your Twitter App Consumer Key $consumer_key = 'YOUR_CONSUMER_KEY'; // Your Twitter App Consumer Secret $consumer_secret = 'YOUR_CONSUMER_SECRET'; // Your Twitter App Access Token $user_token = 'YOUR_ACCESS_TOKEN'; // Your Twitter App Access Token Secret $user_secret = 'YOUR_ACCESS_TOKEN_SECRET'; ?>

  3. The third step: Open js/main.js (record for twitter script starts on line 216 and edit this code, especially line 219. Use Twitter name without @.
    Example for tweets from Creative Market: Use "CreativeMarket" (Not @CreativeMarket).

    // -----------------------------
// Twitter
// -----------------------------
$(function () {
    $(".twitter-feed").tweet({
        join_text: "auto",
        username: ["CreativeMarket"],
        modpath: "php/twitter/",
        count: 6,
        //avatar_size: "42px",
        retweets: false,
        loading_text: "loading ...",
        template: "{text}{time}{user}",//{avatar}
        auto_join_text_default: " ", //We said,
        auto_join_text_ed: " ", //We 
        auto_join_text_ing: " ", //We were 
        auto_join_text_reply: " ", //We replied 
        auto_join_text_url: " " //We were checking out 
    });

Credits

Plugins, files, extensions and libraries used in template

Framework

Plugins

Fonts

Photos
Images are not included in download package

Support

Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with javascript and jquery - we will do what we can.

Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!

Your Themekiosk Team